<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/alarm.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/cubic.css" rel="stylesheet">

    <style>
        .btn-div {
            margin-bottom: 10px;
        }

        .btn-div > a {
            display: inline-block;
            padding: 3px;
            font-family: 微软雅黑;
            padding-left: 8px;
            padding-right: 8px;
            border: 1px solid #38546F;
            border-radius: 3px;
            user-select: none;
        }

        .btn-div > a.active {
            padding: 4px;
            padding-left: 9px;
            padding-right: 9px;
            border: none;
            background-color: #006FB5;
        }

        .btn-div > span {
            color: white;
        }

        .shadows {
            background-color: transparent !important;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
        }
    </style>

</head>

<body style="background-color:transparent;">
<div class="cubic">
    <ul>
        <li><a href="${ctx!}/web/project/alarm">&nbsp;报警监测&nbsp;</a></li>
        <li class="current"><a href="${ctx!}/web/project/maintain">&nbsp;设备保养&nbsp;</a></li>
        <li><a href="${ctx!}/web/project/selfcontroller">&nbsp;自控策略&nbsp;</a></li>
    </ul>
</div>
<div class="tabe_div" style="margin-top: 20px">

    <form method="post" id="eventqueryform" style="width:95%;display: inline-block; margin-left: 21px">
        <div class="btn-div">
            <span>系统分类：</span>
            <a>所有</a>
            <#list sysClasses as sysClass>
                <a typeid="${sysClass.id}">${sysClass.className}</a>
            </#list>
        </div>
        <a class="find_a">关键字搜索：</a><input type="text" class="form_input text_ient" style="width: 200px;" name="name"
                                           placeholder="请输入"/>
        <input type="button" value="搜索" id="eventquery" class="but_find"/>
        <a style="padding: 3px;padding-left:9px;padding-right:9px;border-radius: 4px; background-color: #006FB5"
           class="btn_find"
           href="${ctx!}/web/project/maintain/export" onclick="return true">导出报表</a>
        <span onclick="show_image();"
              style="float:right;border:2px solid #1EB3CC;padding: 1px;padding-left:7px;padding-right:7px;border-radius: 4px;color: #1EB3CC;cursor: pointer;background: #174051">保养流程</span>
        <#if project.maintainImgSrc??>
        <span onclick="delete_image();"
              style="float:right;border:2px solid #1EB3CC;padding: 1px;padding-left:7px;padding-right:7px;border-radius: 4px;color: #1EB3CC;cursor: pointer;background: #174051">删除保养流程图</span>
        </#if>
    </form>


</div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <table cellspacing="0" cellpadding="0" rules="cols" id="table_list" class="table_style table-striped"
           style="margin: 0 auto">
    </table>
    <div style="height: 50px;"></div>
</div>

<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<script src="${ctx!}/assets/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${ctx!}/assets/js/plugins/validate/messages_zh.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>

<!-- 自定义js -->
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

<!-- Page-Level Scripts -->
<script>

    $(document).ready(function () {//外部js调用
        /*为系统分类按钮绑定点击处理函数*/
        $(".btn-div >a").click(function () {
            $(".btn-div>a").removeClass("active")
            $(this).addClass("active")
            createTable()
            // alert($(this).attr("typeid"))
        })

        var endDate = laydate.render({
            theme: "#23b7e5",
            elem: '#endTimeSearch', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'click',//响应事件。如果没有传入event，则按照默认的click
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
            max: 0,
            done: function (value, date) {
                if (value !== '') {
                    startDate.config.max = {
                        year: date.year,
                        month: date.month - 1,
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    }

                } else {
                    startDate.config.max = {
                        year: '',
                        month: '',
                        date: '',
                        hours: '',
                        minutes: '',
                        seconds: ''
                    }
                }

            }
        });
        var startDate = laydate.render({
            theme: "#23b7e5",
            elem: '#startTimeSearch', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'click', //响应事件。如果没有传入event，则按照默认的click
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
            max: 0,
            done: function (value, date) {
                if (value !== '') {
                    endDate.config.min = {
                        year: date.year,
                        month: date.month - 1,
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    }
                } else {
                    endDate.config.min = {
                        year: '',
                        month: '',
                        date: '',
                        hours: '',
                        minutes: '',
                        seconds: ''
                    }
                }
            }
        });

        // 初始化表格
        createTable();
    });

    function createTable() {
        //先清除表格 为点击事件添加
        $('#table_list').bootstrapTable("destroy")
        //初始化表格,动态从服务器加载数据
        $("#table_list").bootstrapTable({
            //使用get请求到服务器获取数据
            method: "POST",
            //必须设置，不然request.getParameter获取不到请求参数
            contentType: "application/x-www-form-urlencoded",
            //获取数据的Servlet地址
            url: "${ctx!}/web/project/maintain/list",
            //表格显示条纹
            striped: true,
            //启动分页
            pagination: true,
            //每页显示的记录数
            pageSize: 25,
            //当前第几页
            pageNumber: 1,
            //记录数可选列表
            pageList: [25, 50, 75, 100, 125],
            //是否启用查询
            search: false,
            //是否启用详细信息视图
            detailView: false,
            detailFormatter: detailFormatter,
            //表示服务端请求
            sidePagination: "server",
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: 'undefined',
            queryParams: queryParams,
            //json数据解析
            responseHandler: function (res) {
                return {
                    "rows": res.content,
                    "total": res.totalElements
                };
            },
            //数据列
            columns: [
                {
                    title: "设备名称",
                    field: "name",
                    width: 110,
                    formatter: function (value, row, index) {
                        return "<span style='color:#EAB926;font-family: 微软雅黑;font-weight: 700;'>" + value + "</span>";
                    }
                }, {
                    title: "型号",
                    field: "modelNum",
                    width: 100

                }, {
                    title: "系统分类",
                    field: "sysType",
                    width: 100
                }, {
                    title: "启用时间",
                    field: "openTime",
                    width: 150
                }, {
                    title: "上次保养时间",
                    field: "lastMaintainTime",
                    width: 150
                }, {
                    title: "管理人",
                    field: "manager",
                    width: 80

                }, {
                    title: "下次保养时间",
                    field: "maintainTime",
                    formatter: function (value, row, index) {
                        var operateHtml = '';
                        if (value !== null) {
                            operateHtml += value.toString().substring(0, 10);
                        } else {
                            operateHtml += '--';
                        }
                        operateHtml = "<span style='float:left;margin-left:10px;'>" + operateHtml + "</span>" + '&nbsp;<@shiro.hasPermission name="system:user:grant"><button style="float:right;margin-right:10px;" class="btn btn-info btn-xs" type="button" onclick="edit(\'' + row.id + '\')"><i class="fa fa-arrows"></i>&nbsp;修改</button></@shiro.hasPermission>';
                        return operateHtml;
                    },
                    width: 200
                }, {
                    title: "保养状态",
                    field: "isMaintain",
                    formatter: function (value, row, index) {
                        if (value === true) {
                            return "<span style='color: green'>已保养<span>";
                        } else {
                            return "<span style='color: red'>未保养<span>";
                        }
                    },
                    width: 80
                }, {
                    title: "操作",
                    field: "isMaintain",
                    formatter: function (value, row, index) {
                        if (value === null || value === false) {
                            return '<@shiro.hasPermission name="system:user:grant"><button class="btn btn-info btn-xs" type="button" onclick="address(\'' + row.id + '\')"><i class="fa fa-arrows"></i>&nbsp;立即处理</button></@shiro.hasPermission>';
                        } else
                            return '';
                    },
                    width: 100
                }]
        });
    }

    function address(id) {
        layer.confirm('确定保养', {icon: 3, title: '提示'}, function (index) {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "${ctx!}/web/project/maintain/address/" + id,
                success: function (msg) {
                    layer.msg(msg.message, {time: 2000}, function () {
                        $('#table_list').bootstrapTable("refresh");
                        layer.close(index);
                    });
                }
            });
        });
    }

    function edit(id) {
        layer.open({
            type: 2,
            title: '下次保养时间',
            shadeClose: true,
            shade: false,
            area: ['600px', '400px'],
            content: '${ctx!}/web/project/maintain/edit/' + id,
            end: function (index) {
                $('#table_list').bootstrapTable("refresh");
            }
        });
    }


    function detailFormatter(index, row) {
        var html = [];
        html.push('<p><b>描述:</b> ' + row.description + '</p>');
        return html.join('');
    }

    function queryParams(params) {
        var sysType = ""; //默认是0表示全显示
        $(".btn-div>a").each(function () {
            if ($(this).hasClass("active")) {
                sysType = $(this).text();
                if (sysType == "所有") {
                    sysType = "";
                }
            }
        });
        return {
            keySearch: $('#eventqueryform input[name=\'name\']').val(),
            // basic
            pageSize: params.pageSize,
            pageNumber: params.pageNumber,
            sortName: params.sortName,
            sortOrder: params.sortOrder,
            sysType: sysType
        }
    }

    $(function () {
        $("#eventquery").click(function () {
            $('#table_list').bootstrapTable(('refresh'));
        });
    });

    function show_image() {
        <#if project.maintainImgSrc??>
        layer.open({
            type: 2,
            title: false,
            zIndex: 1000,
            closeBtn: 1,
            shade: true,
            shade: [0.5],
            shadeClose: true,
            area: ['1000px', '600px'],
            skin: 'shadows',
            content: "${ctx!}/web/project/maintain/show_maintain_image"
        });
        <#else >
        layer.open({
            type: 2,
            title: false,
            zIndex: 1000,
            closeBtn: 1,
            // shade: true,
            // shade: [0.5],
            // shadeClose: true,
            area: ['700px', '450px'],
            skin: 'shadows',
            content: "${ctx!}/web/project/maintain/upload_maintain_image",
            end:function(){
                location.reload();
            }
        });
        </#if>
        return true;
    }

    function delete_image(){
        layer.confirm("是否确认删除保养流程图",{
            btn: ['确认', '取消']
        }, function () {
            $.ajax({
                method:'DELETE',
                url:'${ctx}/web/project/maintain/delete_maintain_image',
                success:function(data){
                    data = eval('('+data+')')
                    layer.msg(data.message)
                    location.reload()
                }
            })
        }, function(){
            // 按钮2的事件
        })

    }

</script>


</body>

</html>
